<template>
  <div class="settilein">
    <van-nav-bar>
    <template #left>
      <van-icon @click="$router.back()" color="#fff" name="arrow-left" size="20" />
      <span class="company">入驻商务部</span>
    </template>
    </van-nav-bar>
    <div class="action">
        <van-cell-group>
          <van-cell title="企业资料" >
              <template #icon>
                  <span class="icon"></span>
              </template>
          </van-cell>
        </van-cell-group>

        <!-- 表单 -->
        <van-form @submit="onSubmit">
        <van-field
          readonly
          clickable
          name="picker"
          label="法人类型"
          :value="value1"
          placeholder="请选择"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            @confirm="onConfirm1"
            @cancel="showPicker1 = false"
          />
        </van-popup>
        <van-field
          name="企业名称"
          label="企业名称"
          :rules="[{ required: true, message: '请填写企业名称' }]"
        />
        <van-field
          name="显示名称"
          label="显示名称"
          :rules="[{ required: true, message: '请填写显示名称' }]"
        />
        <van-field
          name="社会信用代码"
          label="社会信用代码"
          placeholder="请输入18位统一社会信用"
          :rules="[{ required: true, message: '请填写社会信用代码' }]"
        />

        <van-field
          readonly
          clickable
          name="picker"
          label="注册时间"
          :value="value2"
          placeholder="请选择"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>
        <van-field
          name="注册资本"
          label="注册资本"
          :rules="[{ required: true, message: '请填写注册资本' }]"
        />
        <van-field
          readonly
          clickable
          name="picker"
          label="注册地区"
          :value="value3"
          placeholder="请选择"
          @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns3"
            @confirm="onConfirm3"
            @cancel="showPicker3 = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          label="企业类型"
          :value="value4"
          placeholder="请选择"
          @click="showPicker4 = true"
        />
        <van-popup v-model="showPicker4" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns4"
            @confirm="onConfirm4"
            @cancel="showPicker4 = false"
          />
        </van-popup>
        <van-cell-group>
          <van-cell title="主营业务" >
          </van-cell>
        </van-cell-group>
        <van-cell-group>
        <div class="yewu">
        <van-tag plain type="primary" round color='#666' size="large">月嫂</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">育婴师</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">保洁</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">保姆</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">早教</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">养老</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">家装</van-tag>
        <van-tag plain type="primary" round color='#666' size="large">产康师</van-tag>
    </div>
    </van-cell-group>
    <!-- <van-cell-group> -->
    <div class="btn" style="margin: 16px;">
        <van-button  block type="info" native-type="submit">提交</van-button>
    </div>
    <!-- </van-cell-group> -->
    </van-form>

    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      columns1: ['1', '2', '3'],
      value1: '',
      showPicker1: false,
      columns2: ['1', '2', '3'],
      value2: '',
      showPicker2: false,
      columns3: ['1', '2', '3'],
      value3: '',
      showPicker3: false,
      columns4: ['1', '2', '3'],
      value4: '',
      showPicker4: false,
    }
  },
  methods: {
    // 表单提交
    onSubmit () {

    },
    // 点击法人类型
    onConfirm1 (value, index) {
      this.value1 = value
      this.showPicker1 = false
    },
    // 点击注册时间
    onConfirm2 (value, index) {
      this.value2 = value
      this.showPicker2 = false
    },
    // 点击地址
    onConfirm3 (value, index) {
      this.value3 = value
      this.showPicker3 = false
    },
    // 点击企业类型
    onConfirm4 (value, index) {
      this.value4 = value
      this.showPicker4 = false
    },
  },
}
</script>

<style scoped lang='scss'>
.settilein{
    position: relative;
    background-color: rgb(223, 219, 219);
    .action{
        position: relative;
        transform: translateY(-50px);
        // height: 1080px;
        margin: 0 20px;
        padding-bottom: 50px;
        border-radius: 10px;
        background-color: #fff;
        z-index: 99999;
        .icon{
            width: 10px;
            height: 30px;
            margin: 10px 10px 0 0;
            background-color: #3f51b5;
        }
    }
}
.van-nav-bar{
    height: 200px;
    font-weight: 700;
    color: #fff;
    background-color: #3f51b5;
}
.yewu{
    margin: 0 20px;
    .van-tag--plain {
        margin: 20px 20px 0px 20px;
    }
}
.van-button--info{

    background-color: #3f51b5;
}
</style>
